<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box">
<p>This is A paragraph</p>
    <p id="secondPara">This is second paragraph</p>
</div>

<div class="box">

</div>

<p class="box">this is a p tag box</p>

   <!-- what is dom -->
   <!--Document Object Model-->
   <!-- It is  a programming interface (API) for accessing html -->

<!-- structure of the document, change the style or the content -->

<script type="text/javascript">
  var pTags =  document.getElementsByTagName('p');
   var firstPTag = pTags[0];
//pTags[0].innerHTML;
    var boxClass = document.getElementsByClassName('box');
 // boxClass[2].innerHTML
  var secondPara = document.getElementById('secondPara');
 // secondPara.innerHTML;
    secondPara.style.backgroundColor = "blue";
</script>

<script type="text/javascript" src="app.js"></script>
</body>
</html>